<template>
	<section>
	<!-- 工具条 -->
  <el-col :span="24" style="padding:10px;border: 1px solid #bfcbd9">
  <h3 style="padding-bottom: 10px">部门列表</h3>
	<el-row>
       <div class="btn-group">
		<el-button type="primary" size="small" icon="plus" @click="handleAdd()">部门录入</el-button>
		<!-- <el-button type="primary" size="small" icon="edit" @click="handleEdit()" >部门编辑</el-button>         -->
	</div>
	</el-row>
    <!-- 列表 -->
    <template>
      <div class="tacheTree">
        <el-row class="tableHeader">
          <el-col :span="6" class="lightGray">部门名称</el-col>
          <el-col :span="4" class="lightGray">职能描述</el-col>
         <!-- <el-col :span="4" class="lightGray">部门编码</el-col>
          <el-col :span="4" class="lightGray">排序号</el-col>
          <el-col :span="6" class="lightGray">操作</el-col> -->
          <el-col :span="14" class="lightGray">操作</el-col>          
        </el-row>
        <el-tree
          :data="departList"
          :props="defaultProps"
          :load="loadNode2"
          node-key="id"
          lazy
          :expand-on-click-node="false"
          :render-content="renderContent"
          class="treeDivs">
        </el-tree>
      </div>
	</template>
  </el-col>
  
  <el-dialog :title="dialog.dialogTitle" v-model="editFormVisible" :close-on-click-modal="false" @close="isEdit=false">
  <div>
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm" class="departMentiput">
        <el-col :span="12">
          <el-form-item label="部门名称:" prop="departName" required :label-width="formLabelWidth">
            <el-input v-model="editForm.departName" class="short-size" :disabled="isEdit" placeholder="部门名称在3~50位字符"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职能描述:" prop="description"  :label-width="formLabelWidth">
            <el-input v-model="editForm.description" class="short-size" :disabled="isEdit" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级部门:" prop="parentId" :label-width="formLabelWidth">
            <el-input v-show="isEdit" v-model="editForm.parentId" disabled class="short-size" placeholder="请选择部门"></el-input>
             <el-input
              placeholder="请选择"
              v-model="editForm.parentName"
              readonly="readonly"
              ref="depart1"
              :value="editForm.parentId"
              @click.native="isShow1=!isShow1">
            </el-input>
            <el-tree
              v-show="isShow1"
              class="box-tree"
              node-key="id"
              ref="depart1"
              empty-text="暂无数据"
              :data="department.regions"
              :props="department.props"
              :load="loadNode"
              :expand-on-click-node="false"
              lazy
              @node-click="handleNodeClick">
            </el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="status" :label-width="formLabelWidth">
            <el-select v-model="editForm.status" placeholder="" >
              <el-option
                v-for="(item,index) in options1"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限过滤:" prop="isNeedCheck" :label-width="formLabelWidth">
            <el-select v-model="editForm.isNeedCheck" placeholder="" >
              <el-option
                v-for="(item,index) in options2"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序号:" prop="levelNo" :label-width="formLabelWidth"  >
            <el-input v-model="editForm.levelNo" class="short-size" :disabled="isEdit" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部门编码:" prop="departmentCode" :label-width="formLabelWidth"  >
            <el-input v-model="editForm.departmentCode" class="short-size" :disabled="isEdit" ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
  </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">关闭</el-button>
        <el-button type="primary" @click.native="editSubmit()" v-show="!isEdit">确定</el-button>
      </div>
  </el-dialog>
  <popup v-model="menberModule"
     position="right"
     :styles="{top:'110px'}"
      cover="500px" style="bottom:auto">
  <!-- <el-col :span="9"> -->
    <div calss="bor" style="padding:0 10px 0 10px;border: 1px solid #bfcbd9;" v-loading="menberLoading"> 
      <h3>{{this.data.text}}成员列表</h3>
      <div v-if="menberModule">
        <p>用户管理</p>
        <el-form :inline="true" :model="userForm">
        <el-row>
          <el-col :span="12">               
            <el-form-item label="用户名：" style="margin-bottom: 5px;">
              <el-input v-model="userName" placeholder="" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"> 
            <el-form-item label="角色名称：" style="margin-bottom: 5px;">
              <el-input v-model="realName" placeholder="" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btn-group" style="margin-bottom: 5px;">
          <el-button type="primary" size="small" icon="plus" @click="handleAdduser()">用户录入</el-button>          
          <el-button type="primary" size="small" icon="" @click="handleReset()" style="float:right">重置</el-button>
          <el-button type="primary" size="small" icon="" @click="handleSerch()" style="float:right">查询</el-button>          
        </div>
        <!-- 列表 -->
        <el-table :data="userData" highlight-current-row v-loading="listLoading" @current-change="selsChange" style="width: 100%;" border height="400">
              <el-table-column type="index" width="50">
              </el-table-column>
              <el-table-column prop="userName" label="用户名" width="95" sortable>
              </el-table-column>
              <el-table-column prop="realName" label="真实姓名" min-width="95" sortable>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="95" sortable>
              </el-table-column>
            <el-table-column label="操作" fixed="right" width="140">
            <template scope="scope" >
              <el-button type="primary" size="small"  @click="handleEdituser(scope.$index, scope.row)" >编辑</el-button>
              <el-button size="small" type="danger" @click="handleDeleteuser(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        </el-form>
      </div>
      <el-col :span="24" class="toolbar">
        <el-pagination
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" 
          style="float:right;">
        </el-pagination>
      </el-col>    
    </div>
  <!-- </el-col> -->
  </popup>
  

  <el-dialog :title="dialog.dialogTitle" v-model="edituserFormVisible" :close-on-click-modal="false" @close="isEdit2=false">
      <el-form :model="edituserForm" label-width="80px" :rules="edituserFormRules" ref="edituserForm" class="departMentiput">
        <el-col :span="12">
          <el-form-item label="用户名:" prop="userName" required :label-width="formLabelWidth">
            <el-input v-model="edituserForm.userName" class="short-size" :disabled="isEdit2" placeholder="用户名范围在2~50位字符"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名:" prop="realName" required :label-width="formLabelWidth">
            <el-input v-model="edituserForm.realName" class="short-size" :disabled="isEdit2" placeholder="填写个人真实姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码:" prop="password" required :label-width="formLabelWidth" v-if="pwShow" >
            <el-input v-model="edituserForm.password" class="short-size" :disabled="isEdit2" placeholder="请输入包含大小写字母数字,8-30位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重复密码:" prop="repassword" required :label-width="formLabelWidth" v-if="pwShow">
            <el-input v-model="edituserForm.repassword" class="short-size" :disabled="isEdit2" placeholder="重复个人密码"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-row> -->
        <el-col :span="12">
          <el-form-item label="部门：" :label-width="formLabelWidth" >
            <el-input v-show="isEdit2" v-model="edituserForm.departId" disabled class="short-size" placeholder="请选择部门"></el-input>
             <el-input
              placeholder="请选择"
              v-model="edituserForm.departName"
              readonly="readonly"
              ref="depart1"
              :value="edituserForm.departId"
              @click.native="isShow2=!isShow2">
            </el-input>
            <el-tree
              v-show="isShow2"
              class="box-tree"
              node-key="id"
              ref="depart1"
              empty-text="暂无数据"
              :data="department.regions"
              :props="department.props"
              :load="loadNode"
              :expand-on-click-node="false"
              lazy
              @node-click="handleNodeClick2">
            </el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="兼职部门：" :label-width="formLabelWidth" prop="partDept" v-show="partShowadd">
            <!-- <el-input v-show="isEdit2" v-model="edituserForm.partDept" disabled class="short-size"></el-input> -->
             <el-input
              placeholder="请选择"
              v-model="edituserForm.partDeptName"
              readonly="readonly"
              :value="edituserForm.partDept"
              @click.native="isShow3=!isShow3">
            </el-input>
            <el-tree
              v-show="isShow3"
              class="box-tree"
              node-key="id"
              empty-text="暂无数据"
              :data="departments3.regions"
              :props="departments3.props"
              :load="loadNode"
              :expand-on-click-node="false"
              lazy
              show-checkbox
              check-strictly
              @node-click="handleNodeClick3"
                @check-change="handleCheckChange">
            </el-tree>
          </el-form-item>

          <el-form-item label="兼职部门：" :label-width="formLabelWidth" prop="partDept" v-show="partShowedit">
            <!-- <el-input v-show="isEdit2" v-model="edituserForm.partDept" disabled class="short-size"></el-input> -->
             <el-input
              placeholder="请选择"
              v-model="edituserForm.partDeptName"
              readonly="readonly"
              :value="edituserForm.partDept"
              @click.native="clean">
            </el-input>
            <el-tree
              v-show="isShow4"
              class="box-tree"
              node-key="id"
              empty-text="暂无数据"
              :data="departments.regions"
              :props="departments.props"
              :load="loadNodeedit"
              :expand-on-click-node="false"
              lazy
              show-checkbox
              check-strictly
              :default-expanded-keys="expanded"
              :default-checked-keys="checked"
              @node-click="handleNodeClick4"
                @check-change="handleCheckChange4">
            </el-tree>
          </el-form-item>
        </el-col>
        <!-- </el-row> -->
        <el-col :span="12">
          <el-form-item label="职务:" prop="job" :label-width="formLabelWidth">
            <el-input v-model="edituserForm.job" class="short-size" :disabled="isEdit2"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="兼职职务:" prop="partJob" :label-width="formLabelWidth">
            <el-input v-model="edituserForm.partJob" class="short-size" :disabled="isEdit2"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12">
        <el-form-item label="手机号码:" prop="mobilePhone"  :label-width="formLabelWidth">
          <el-input v-model="edituserForm.mobilePhone" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="办公电话:" prop="officePhone" :label-width="formLabelWidth">
          <el-input v-model="edituserForm.officePhone" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="内线电话:" prop="interPhone" :label-width="formLabelWidth">
          <el-input v-model="edituserForm.interPhone" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="传真:" prop="fax" :label-width="formLabelWidth">
          <el-input v-model="edituserForm.fax" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="微信号:" prop="wxId" :label-width="formLabelWidth">
          <el-input v-model="edituserForm.wxId" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="康拓普用户id:" prop="ktpUserId" :label-width="formLabelWidth">
          <el-input v-model="edituserForm.ktpUserId" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="位置:" prop="location" :label-width="formLabelWidth">
          <el-input v-model="edituserForm.location" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="常用邮箱:" prop="email" :label-width="formLabelWidth">
          <el-input v-model="edituserForm.email" class="short-size" :disabled="isEdit2"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="VIP等级：" prop="vipId" :label-width="formLabelWidth">
             <el-select v-model="edituserForm.vipId" placeholder="" >
              
              <el-option label="VIP1" value="1"></el-option>
              <el-option label="VIP2" value="2"></el-option>
              <el-option label="VIP3" value="3"></el-option>
              <el-option label="VIP4" value="4"></el-option>
              <el-option label="VIP5" value="5"></el-option>
              <el-option label="VIP6" value="6"></el-option>
             </el-select>
          </el-form-item> 
        </el-col>     
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="edituserFormVisible = false">关闭</el-button>
        <el-button type="primary" @click.native="edituserSubmit('edituserForm')" v-show="!isEdit2">确定</el-button>
      </div>
    </el-dialog>

	</section>
</template>
<script>
	import NProgress from 'nprogress'
    import Popup from '../../components/Popup'
  	import {depList,userDatagrid,del,checkdepart,getDepComboTree,save,departContDel,getDepartData,getUserData,addUserMa} from '../../api/system';
	export default {
    components: {
      Popup
    },
	data() {
	 return {
    isEdit:false,
    isEdit2:false,
    isShow1:false,
    isShow2:false,
    isShow3:false,
    isShow4:false,
    partShowadd: false,
    partShowedit: false,
    pwShow:true,
    formLabelWidth:"100px",
    data:'',
	 	table:[],
	 	departList: [],
	 	defaultProps: {
          value:'id',
          label: 'text',
          children:'children'
        },
		listLoading: false,

    // 弹框标题
    dialog: {
      dialogType: 0,
      dialogTitle: ''
    },
    editFormVisible:false,
    //编辑界面数据
    editForm:{},
    options1:[{
        label:'启用',
        value:'1',
      },{
        label:'禁用',
        value:'0',
      }],
      options2:[{
        label:'是',
        value:'1',
      },{
        label:'否',
        value:'0',
      }],
    editFormRules:{
      departName:[{ required: true, message: '请填部门名称', trigger: 'blur' },
            { min: 3, max: 50, message: '部门名称在3~50位字符', trigger: 'blur' }],
    },
    parentName:'',
    department:{
      regions: [],
          props: {
            label: 'text',
            children: 'id'
          }
    },

    edituserForm:{
      vipId:''
    },
    edituserFormVisible:false,
    edituserFormRules:{
      userName:[{ required: true, message: '请填用户名', trigger: 'blur' },
            { min: 2, max: 50, message: '用户名范围在2~50位字符', trigger: 'blur' }],

      realName:[{ required: true, message: '请填真实姓名', trigger: 'blur' }],

      password:[{ required: true, message: '请输入密码', trigger: 'blur' },
            { min: 8, max: 30, message: '请输入包含大小写字母数字,8-30位', trigger: 'blur' }],
      repassword:[{ required: true, message: '请填写重新密码', trigger: 'blur' }],
    },
    departments3:{
      regions: [],
          props: {
            label: 'text',
            children: 'id'
          }
    },
    departments:{
      regions: [],
          props: {
            label: 'text',
            children: 'id'
          }
    },
    expanded:[],
    checked:[],
    checkedData:'',

    menberLoading:false,
    menberModule:false,
    departid:'',
    userForm:{},
    userName:'',
    realName:'',
    userData:[],
    page: 1,
    total:0,
    size:10,
    currentPage:1,
    departEditId:'',
    first:1
	 }
	},

	methods:{
		
		//部门录入 
		handleAdd(){
      this.dialog.dialogTitle = '部门录入';
      this.dialog.dialogType = 0;
      this.editFormVisible=true;
      this.editForm={
        departName:'',
        description:'',
        parentId:'',
        parentName:'',
        status:'',
        isNeedCheck:'',
        no:'',
        departmentCode:''
      };
      getDepComboTree().then((res)=>{
        this.department.regions  = res.obj;
      });      
    },
		//部门编辑
		handleEdit(data){
      this.dialog.dialogTitle = '部门编辑';
      this.dialog.dialogType = 1;
      this.editFormVisible = true;
      this.departEditId = data.id;
      getDepartData({id:data.id}).then((res)=>{
        this.editForm = res.obj;
        this.editForm.parentName = res.obj.parentName;
        this.editForm.parentId = res.obj.parentId;
      });
      getDepComboTree().then((res)=>{
        this.department.regions  = res.obj;
      });

    },
    editSubmit(){
      let para=this.editForm;
      if(this.dialog.dialogType == 0){
        save(para).then(()=>{
          this.getList();
        });
        this.editFormVisible = false;
      }else if(this.dialog.dialogType == 1){
        para.id = this.departEditId;
        console.log(para);
        save(para).then(()=>{
          this.getList();
        });
        this.editFormVisible = false;
        
      };
    },
    // 用户添加
    handleAdduser(){
      this.edituserFormVisible = true;
      this.pwShow = true;
      this.isShow2=false;
      this.isShow3=false;
      // this.isShow4=false;
      this.partShowadd=true;
      this.partShowedit=false;
      this.dialog.dialogTitle = '用户录入';
      this.dialog.dialogType = 0;
      this.edituserForm={
        userName:'',
        realName:'',
        password:'',
        repassword:'',
        departNmae:'',
        departId:'',
        partDept:'',
        partDeptName:'',
        job:'',
        partJob:'',
        mobilePhone:'',
        officePhone:'',
        interPhone:'',
        fax:'',
        wxId:'',
        ktpUserId:'',
        location:'',
        email:'',
        vipId:'',
        id:''
      };
      getDepComboTree({}).then((res)=>{
        this.department.regions  = res.obj;
        this.departments3.regions=res.obj;
      });
    },
    handleEdituser(index,row){
      this.edituserFormVisible = true;
      this.pwShow = false;
      this.isShow2=false;
      // this.isShow3=false;
      this.isShow4=false;
      this.partShowadd=false;
      this.partShowedit=true;
      this.dialog.dialogTitle = '用户编辑';
      this.dialog.dialogType = 1;
      /*delete this.edituserFormRules.password;
      delete this.edituserFormRules.repassword;*/
      this.checked =[];
      
      getUserData({id:row.id}).then((res)=>{
        if(this.first==1){
          this.edituserForm.partDept=res.obj.partDept;
          this.edituserForm.partDeptName=res.obj.partDeptName;
        }
        // this.edituserForm = {};
        // this.checked = [];
        // this.edituserForm = res.obj;
        this.checkedData = res.obj.partDept;
        this.edituserForm.userName=res.obj.userName;
        this.edituserForm.realName=res.obj.realName;
        this.edituserForm.departName=res.obj.departName;
        this.edituserForm.departId=res.obj.departId;
        /*this.edituserForm.partDept=res.obj.partDept;
        this.edituserForm.partDeptName=res.obj.partDeptName;*/
        this.edituserForm.job=res.obj.job;
        this.edituserForm.partJob=res.obj.partJob;
        this.edituserForm.mobilePhone=res.obj.mobilePhone;
        this.edituserForm.officePhone=res.obj.officePhone;
        this.edituserForm.interPhone=res.obj.interPhone;
        this.edituserForm.fax=res.obj.fax;
        this.edituserForm.wxId=res.obj.wxId;
        this.edituserForm.ktpUserId=res.obj.ktpUserId;
        this.edituserForm.location=res.obj.location;
        this.edituserForm.email=res.obj.email;
        this.edituserForm.vipId= res.obj.vipId;
        this.edituserForm.id= row.id;
        this.checkedData = res.obj.partDept;
        if(res.obj.partDeptName==null || res.obj.partDeptName==undefined){
        this.edituserForm.partDept='';
        this.edituserForm.partDeptName='';
      }
        getDepComboTree({}).then((res)=>{
          this.department.regions  = res.obj;
          this.departments.regions=res.obj;
          if(this.checkedData){
            if(this.checkedData[this.checkedData.length-1]==',')
              this.checkedData=this.checkedData.substring(0,this.checkedData.length-1);
            this.checked = this.checkedData.split(",");
            console.log(this.checked);
          }
        });
        this.first++;
      });
    },
    clean(){
      this.isShow4=!this.isShow4;
      if(this.isShow4==true){
          // this.edituserForm.partDeptName='';
          // this.edituserForm.partDept='';
        }
    },
    edituserSubmit(edituserForm){
      this.$refs[edituserForm].validate((valid) => {
        if (valid) {
          var formParams = this.edituserForm;
          if(this.dialog.dialogType == 0){            
            //录入提交
            addUserMa(formParams).then(()=>{
              this.getUserList();
            });
            this.edituserFormVisible = false;
          }else if(this.dialog.dialogType == 1){
            //编辑提交
            addUserMa(formParams).then(()=>{
              this.getUserList();
            });
            this.edituserFormVisible = false;
          }
        }else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    handleNodeClick(data,node){
      // console.log(data);
        this.editForm.parentId = data.id;
        this.editForm.parentName = data.text;
        this.isShow1=!this.isShow1;
      },
      handleNodeClick2(data,node){
      // console.log(data);
        this.edituserForm.departId = data.id;
        this.edituserForm.departName = data.text;
        this.isShow2=!this.isShow2;
      },
      handleNodeClick3(data,node){
      // console.log(data);
        this.isShow3=!this.isShow3;
      },
      handleNodeClick4(data,node){
      // console.log(data);
        this.isShow4=!this.isShow4;
      },
    //加载树结点
    loadNode(node, resolve) {
      // var para={parentid:node.data.id};
      var para={};
        if(node.data.id){
        para.parentid = node.data.id;
      }else{
        para.parentid = 0;
      }
        getDepComboTree(para).then(res => {   
            return resolve(res.obj);
            var data;  
            if(res.length){
                data=res.obj;
              }
              else{data=[];}
              resolve(data);
          });
       },

       loadNodeedit(node, resolve) {
        var para={parentid:node.data.id};
        if(node.data.id){
          para.parentid = node.data.id;
        }else{
          para.parentid = 0;
        }
        getDepComboTree(para).then(res => {   
            return resolve(res.obj);
            var data;  
            if(res.length){
                data=res.obj;
              }
              else{data=[];}
              resolve(data);
          });
       },

       // 复选树
       handleCheckChange(data, checked, indeterminate){
        // debugger;
        if(checked){
          if(this.edituserForm.partDeptName==""){
            this.edituserForm.partDeptName = data.text;
            this.edituserForm.partDept = data.id;
          }else{
            this.edituserForm.partDeptName += ',' + data.text ;
            this.edituserForm.partDept += ',' + data.id;
          }
        }else{
          if(this.edituserForm.partDeptName.indexOf(',')>-1){         
            this.edituserForm.partDeptName = this.edituserForm.partDeptName.replace(','+data.text,'');
            this.edituserForm.partDeptName = this.edituserForm.partDeptName.replace(data.text+',','');
            this.edituserForm.partDept = this.edituserForm.partDept.replace(data.id+',','');
            this.edituserForm.partDept = this.edituserForm.partDept.replace(','+data.id,'');
          }else{
            this.edituserForm.partDeptName = '';
            this.edituserForm.partDept = '';
          }
        }
        console.log(this.edituserForm.partDeptName);
        console.log(this.edituserForm.partDept);
      },
    handleCheckChange4(data, checked, indeterminate){
      // this.$nextTick(function () {
        // debugger
      if(checked){
      if(this.edituserForm.partDeptName==""){
        this.edituserForm.partDeptName = data.text;
          this.edituserForm.partDept = data.id;
      }else{
        if(this.edituserForm.partDeptName.charAt(this.edituserForm.partDeptName.length - 1)==','){          
            this.edituserForm.partDeptName = this.edituserForm.partDeptName.substring(0, this.edituserForm.partDeptName.lastIndexOf(','));        
            // this.editForm.partDept = this.editForm.partDept.substring(0,this.editForm.partDept.lastIndexOf(','));
            this.edituserForm.partDeptName += ',' + data.text ;
            this.edituserForm.partDept += ',' + data.id;
        }else{
          this.edituserForm.partDeptName += ',' + data.text ;
            this.edituserForm.partDept += ',' + data.id;
        }               
      }
      }else{
        if(this.edituserForm.partDeptName.indexOf(',')>-1){         
          this.edituserForm.partDeptName = this.edituserForm.partDeptName.replace(','+data.text,'');
          this.edituserForm.partDeptName = this.edituserForm.partDeptName.replace(data.text+',','');
          this.edituserForm.partDept = this.edituserForm.partDept.replace(data.id+',','');
          this.edituserForm.partDept = this.edituserForm.partDept.replace(','+data.id,'');
        }else{
          this.edituserForm.partDeptName = '';
          this.edituserForm.partDept = '';
        }
      }
      console.log(this.edituserForm.partDeptName);
      console.log(this.edituserForm.partDept);
    // })
      /*console.log(data);
      if(checked){
          if(this.edituserForm.partDeptName){
            this.edituserForm.partDeptName = this.edituserForm.partDeptName.replace(data.text+',','');
            this.edituserForm.partDept = this.edituserForm.partDept.replace(data.id+',','');
          }
          this.edituserForm.partDeptName += data.text + ',' ;
          this.edituserForm.partDept += data.id + ',';
          
        }else{
          if(this.edituserForm.partDeptName){
            this.edituserForm.partDeptName = this.edituserForm.partDeptName.replace(data.text+',','');
            this.edituserForm.partDept = this.edituserForm.partDept.replace(data.id+',','');
          }
        }*/
    },

		// 获取部门列表
		getList(){
      // depList();
			let params={
        field:"id,parentid,parentname,text,src,state",
      };
			depList(params).then(res=>{
        // console.log(data);
				this.departList = res;
			});
		},

    selsChange (sels) {
      this.sels = sels;
    },

    //删除
    handleDelete(data){
      departContDel({id:data.id}).then(()=>{
        this.getList();
      });
    },

    // 查看成员
    handleManage(data){
      this.data=data;
      console.log(data);
      // this.menberLoading=true;
      this.departid=data.id
      this.menberModule=true;
      this.getUserList();
      
    },
    getUserList(){
      let params={
        page: this.currentPage,
        rows: this.size,
        field:"id,userName,realName,status"
      };
      params.departid=this.departid;
      userDatagrid(params).then(res=>{
        this.total = Number(res.total);
        
        for (var i = res.rows.length - 1; i >= 0; i--) {
          if(res.rows[i].status==1){
              res.rows[i].status="正常";
          }
        }
        this.userData = res.rows;
      });
    },
    handleSerch(){
      let params={
        page: this.currentPage,
        rows: this.size,
        field:"id,userName,realName,status"
      };
      params.departid=this.departid;
      params.userName=this.userName;
      params.realName=this.realName;

      userDatagrid(params).then(res=>{
        this.total = Number(res.total);
        
        for (var i = res.rows.length - 1; i >= 0; i--) {
          if(res.rows[i].status==1){
              res.rows[i].status="正常";
          }
        }
        this.userData = res.rows;
      });
    },
    handleReset(){
      this.userName=null;
      this.realName=null;
      this.getUserList();
    },
    handleSizeChange(val){
      this.size = val;
        if(this.userForm.userName==null && this.userForm.realName==null){
          this.getUserList();
        }else{
          this.handleSerch();
        };
    },
    handleCurrentChange(val){
      this.currentPage = val;
        if(this.userForm.userName==null && this.userForm.realName==null){
          this.getUserList();
        }else{
          this.handleSerch();
        };
    },

    // 用户删除
    handleDeleteuser(index,row){
      var para={
          id:row.id,
          userName:row.userName,
      };
      del(para).then(()=>{
        this.getUserList();
      })
    },

    loadNode2(node, resolve) {
      
      let params={
        field:"id,parentid,parentname,text,src,state"
      };
      params.id=node.data.id;
      depList(params).then(res => {   
        return resolve(res);
        var data;  
        if(res.length){
            data=res;
          }
          else{data=[];}
          resolve(data);
      });
    },
		renderContent(h, { node, data, store }) {      
        let html;
          
          html=<span class="clearfix">
                  <span style="float: right;margin-right: 5px;">
                    <el-button size="mini" on-click={()=>this.handleDelete(data)}>删除</el-button>
                    <el-button size="mini" on-click={()=>this.handleEdit(data)}>部门编辑</el-button>
                    <el-button size="mini" on-click={()=>this.handleManage(data)}>查看成员</el-button>
                  </span>
                  <span style="display: inline-block; width: 24.6676%;">
                    {node.label}
                  </span>
                  <span style="display: inline-block; width: 10.84%;">
                    {data.src}
                  </span>
                  <span style="display: inline-block; width: 10.84%;">
                    {data.departmentCode}
                  </span>
                  <span style="display: inline-block; width: 10.84%;">
                    {data.levelNo}
                  </span>
               </span>
          
        return(html);
    },


  },

	mounted() {

    },
}
</script>
<style scoped>
  .box-tree{
      position: absolute;
      overflow: scroll;
      z-index: 100;
      width: 100%;
      max-height:300px;
    }
  /*表格头样式*/
  .tableHeader{
    margin-top: 20px;
    height: 40px;
  }

  .lightGray{
    background: #E5E9F2;
    height: 100%;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #fff;
  }
  .dialog-footer{
    padding-bottom: 20px;
    float:right;
  }
  .treeDivs{
    overflow-y: scroll;
    max-height: 445px;
  }
</style>